import React, { Component } from 'react'
import ReactECharts from 'echarts-for-react';
import { echarts, weeks, userInfo, address } from "./service.js";
import homeStyle from "./home.module.less";
import { Table } from 'antd';

class HomeCmt extends Component {
    state = {
        yArr: [],
        wArrx: [],
        wArry: [],
        yearOptions: {
            grid: { top: 8, right: 8, bottom: 24, left: 36 },
            xAxis: { type: 'category', data: [] },
            yAxis: { type: 'value' },
            series: [],
            tooltip: { trigger: 'axis' },
        },
        weekOption: {
            tooltip: {},
            legend: { data: ['销量'] },
            xAxis: { data: [] },
            yAxis: {},
            series: [{ name: '销量', type: 'bar', data: [] }]
        },
        columns: [
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '电话号码',
                dataIndex: 'tel',
                key: 'tel',
            },
            {
                title: '所在地',
                dataIndex: 'city',
                key: 'city',
            },
            {
                title: '用户账号',
                dataIndex: 'userid',
                key: 'userid',
            },
            {
                title: '密码',
                dataIndex: 'psd',
                key: 'psd',
            },
        ],
        data: [],
    }

    async getEcharts() {
        let { data } = await echarts()
        data.val.forEach((item) => {
            this.state.yArr.push({ data: item, type: "line", smooth: true })
        });
        this.setState(() => ({
            yearOptions: { xAxis: { data: data.x }, series: this.state.yArr }
        }))
    }

    async getWeeks() {
        let { data } = await weeks()
        data.forEach((item) => {
            this.state.wArrx.push(item.x);
            this.state.wArry.push(item.val)
        })
        this.setState(() => ({
            weekOption: { xAxis: { data: this.state.wArrx }, series: [{ name: '销量', type: 'bar', data: this.state.wArry }] }
        }))
    }

    async getuser() {
        let data = await userInfo()
        let add = await address()
        let brr = []
        let crr = []
        let userArr = []
        data.data.forEach((item) => {
            add.data.forEach((item2) => {
                if (item.userid === item2.userid && item.tel === item2.tel) {
                    brr.push(item)
                    crr.push(item2)
                    userArr.push({
                        name: item2.name,
                        tel: item.tel,
                        city: `${item2.city} ${item2.county}`,
                        userid: item.userid,
                        psd: item.password
                    })
                }
            })
        })
        this.setState({ data: userArr })
    }

    render() {
        return (
            <div>
                {/* 年度报告 */}
                <h1 className={homeStyle.tit}>年度报告</h1>
                <ReactECharts option={this.state.yearOptions}></ReactECharts>
                {/* 周报告 */}
                <h1 className={homeStyle.tit}>周报告</h1>
                <ReactECharts option={this.state.weekOption} style={{ height: 400 }} opts={{ renderer: 'svg' }} />
                {/* 用户列表 */}
                <h1 className={homeStyle.tit}>用户信息列表</h1>
                <Table columns={this.state.columns} dataSource={this.state.data} />
            </div>
        );
    }

    componentDidMount() {
        this.getEcharts()
        this.getWeeks()
        this.getuser()
    }
}

export default HomeCmt;